<template>
  <div class="back-top">
    <div id="back-top-button" class="back-top-hidden" v-on:click="backTop">
      <button>TOP</button>
    </div>
  </div>
</template>

<script>
import $ from "jquery";

export default {
  name: "BackTop",
  methods:{
    backTop(){
      let ht = $('html:first');
      // 滑动到指定位置
      ht.animate({
        scrollTop: 0
      }, 800);
    }
  },
  mounted() {
    let button = document.getElementById('back-top-button');
    showBackTop()
    window.addEventListener("scroll", showBackTop, true);
    function showBackTop(){
      let current = document.body.scrollTop;
      if (!current) {
        current = document.documentElement.scrollTop;
      }
      if (current > 500) {
        button.className = 'back-top-show'
      } else {
        button.className = 'back-top-hidden'
      }
    }
  }
}
</script>

<style scoped lang="scss">
.back-top {
  position: fixed;
  bottom: 50px;
  right: 50px;
  z-index: 99;
  transition: visibility 0.3s;
}

.back-top-show {
  visibility: visible;
}

.back-top-hidden {
  visibility: hidden;
}
/* From uiverse.io by @adamgiebl */
button {
  cursor: pointer;
  background: #FBCA1F;
  font-family: inherit;
  padding: 10px 3px;
  font-weight: 900;
  font-size: 18px;
  border: 3px solid black;
  border-radius: 10px;
  box-shadow: 0.1em 0.1em;
  transition: all 0.1s;
}

button:hover {
  transform: translate(-0.05em, -0.05em);
  box-shadow: 0.15em 0.15em;
}

button:active {
  transform: translate(0.05em, 0.05em);
  box-shadow: 0.05em 0.05em;
}
</style>